<template>
  <div class="goodsItem">
    <!-- <header class="header">
      <a href="javascript:void(0);" class="back" @click="goBack"></a>
      <div class="head-nav">
        <router-link tag="span" active-class="active" :to="'/goods/'+getGid">商品</router-link>
        <router-link tag="span" active-class="active" :to="'/goods/detail/'+getGid">详情</router-link>
        <router-link tag="span" active-class="active" :to="'/goods/review/'+getGid">评价</router-link>
      </div>
      <a href="javascript:void(0);" class="more"></a>
    </header> -->
    <!-- 轮播图 -->
    <van-swipe @change="onChange" class="swiper-wrapper">
      <van-swipe-item v-for="(item, index) in imgList" :key="index">
        <img :src="item.image" class="photos" alt="" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          {{ current + 1 }}/{{ imgList.length }}
        </div>
      </template>
    </van-swipe>
    <div class="active-item" v-if="time">
      <div class="price" :style="{ background: getFirstBackground }">
        <div class="active-price">
          <span :style="{ color: active_tips.firstDescribe.color }"
            >¥{{ active_tips.firstDescribe.describe_price }}</span
          >
          {{ active_tips.firstDescribe.describe_subject }}
        </div>
        <div class="sale-price">
          {{ active_tips.secendDescribe.describe_subject }}
          <span>¥{{ active_tips.secendDescribe.sale_price }}</span>
        </div>
      </div>
      <div class="active-time" :style="{ background: getSecondBackground }">
        <div class="brand-day">
          {{ active_tips.thirdDescribe.describe_subject }}
        </div>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ formatTime(timeData.hours) }}</span>
            <span class="colon">:</span>
            <span class="block">{{ formatTime(timeData.minutes) }}</span>
            <span class="colon">:</span>
            <span class="block">{{ formatTime(timeData.seconds) }}</span>
          </template>
        </van-count-down>
      </div>
    </div>
    <!--商品详情信息 -->
    <div class="goods-info">
      <p class="pro_info">{{ infos.subject }}</p>
      <p class="pro_desc ellipsis">{{ infos.presubject }}</p>
      <div class="price-origin" v-if="sale_price">
        <span class="pro-price">
          <span class="now-yuan">￥</span>
          <span class="now-price"
            ><span>{{ sale_price }}</span></span
          >
          <span class="origin-price">￥{{ market_price }}</span>
        </span>
        <span class="pro-origin">
          <img :src="infos.price_right.img" alt="" />
        </span>
      </div>
    </div>
    <!-- 灰色背景区域 -->
    <div class="margin_div"></div>
    <div class="margin_div"></div>
    <!-- 优惠 -->
    <div
      class="discounts ft13 rela c666 pt10 pl10 pb10 bbt arrow"
      v-if="discounts"
    >
      <a :href="discounts.target.param" class="discount_link">
        <span class="discount_l">
          <i class="icon">
            <img :src="discounts.icon" class="ingb" />
          </i>
          <span class="ask-left-text">{{ discounts.left_text }}</span>
        </span>
        <span class="discount_r ellipsis pr20 ftr ft12 c999 w74">{{
          discounts.right_text
        }}</span>
      </a>
    </div>
    <!-- 灰色背景区域 -->
    <div class="margin_div" v-if="format"></div>
    <!-- 筛选数量 -->
    <ul class="bgfff new_specifications" v-if="format">
      <li class="paddingtb10 ft13 rela c666 ml10 handcursor">
        <span class="ellipsis w100"
          ><span>已选</span>
          <span class="bui-important format-detail">{{
            format.option[selectedId].name
          }}</span></span
        >
      </li>
      <li class="pad10 ft13 rela c666 btop">
        <span class="dib w15 format-title c999 ft12">规格</span>
        <div class="dib w85 c333 ft14">
          <a
            href="javascript:void(0)"
            data-mode="goods"
            class="a-adapter"
            v-for="(item, index) in format.option"
            :key="item.gid"
          >
            <span
              class="dib format-item mr5 mb5 handcursor round5 b-all"
              :class="{ selected: index === selectedId ? true : false }"
              @click="changeSpecife(index, item.gid)"
            >
              <span>{{ item.name }}</span></span
            >
          </a>
        </div>
      </li>
    </ul>
    <!-- 灰色背景区域 -->
    <div class="margin_div" v-if="format"></div>
    <!-- 购买数量 -->
    <div class="buyCount">
      <div class="buyCount_text">购买数量</div>
      <div class="stepper">
        <van-stepper v-model="buyCount" integer theme="round" />
      </div>
    </div>
    <!-- 灰色背景区域 -->
    <div class="margin_div"></div>
    <!-- 送至地区 -->
    <div class="place arrow">
      <span class="place_info">
        <span>送至</span>
        <i>
          <img
            src="https://static.epetbar.com/static_wap/epetapp/pages/goods_detail/images/dress.png"
            alt=""
          />
        </i>
        <span>重庆 渝中区</span>
      </span>
      <span class="button_icon ellipsis pr20 ftr ft12 c999"></span>
    </div>
    <!-- 产品描述 -->
    <ul class="describe">
      <li v-for="(item, index) in describe" :key="index">
        <img :src="item.icon" alt="" />
        <span>{{ item.text }}</span>
      </li>
    </ul>
    <!-- 灰色背景区域 -->
    <div class="margin_div"></div>
    <!-- 商家详情 -->
    <div class="brandhotbuy">
      <div class="brandtop">
        <img
          :src="brandhotList.logo.image"
        />
        <div class="brandtit">
         <div>
              <p>{{brandhotList.title}}</p>
              <p v-if="brandhotList.sign.text">{{brandhotList.sign.text}}</p>
         </div>
          <div class="fr follow-btn ft13 no-follow">
            <span class="mr3">
              <img
                src="//static.epetbar.com/static_wap/epetapp/pages/goods_detail/images/add.png"
                alt=""
                class="plus_icon"
              />
            </span>
            <span class="guanzhu">关注</span>
          </div>
        </div>
      </div>
      <ul class="brandbot">
          <li
            v-for="(item,index) in brandhotList.list"
            :key="item+index"
          >
              <p class="c333">{{item.title}}</p>
              <p class="c999">{{item.value}}</p>
          </li>
         
      </ul>
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>
 
<script>
import Vue from "vue";
import {
  Swipe,
  Toast,
  SwipeItem,
  CountDown,
  Stepper,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
} from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(CountDown);
Vue.use(Stepper);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
export default {
  data() {
    return {
      time: 0,
      goodsItem: [],
      current: 0,
      imgList: [],
      active_tips: {
        firstDescribe: "",
        secendDescribe: "",
        thirdDescribe: "",
      },
      //产品信息
      infos: {},
      //折扣优惠
      discounts: {
        target: { param: "" },
      },
      //筛选质量
      format: {
        option: [{ name: "" }],
      },
      //点击选择规格
      selectedId: 0,
      //购买数量
      buyCount: 1,
      //商品描述
      describe: [],
      market_price: 0,
      sale_price: 0,
      brandhotList:{
          logo:{},
          sign:{}
      }
    };
  },

  async mounted() {
    await this._loadData();
    // console.log(this.$router);
    // console.log(this.$route);
  },
  computed: {
    getGid() {
      return this.$route.params.gid;
    },
    getFirstBackground() {
      return "url(" + this.active_tips.firstbackgroudPhoto + ")";
    },
    getSecondBackground() {
      return "url(" + this.active_tips.secendbackgroudPhoto + ")";
    },
    getTime() {
      return;
    },
  },
  methods: {
    async _loadData() {
      //获取滚动图片信息
      await this.$http
        .get({
          url: "/goods/detail/main.html",
          params: {
            gid: this.$route.params.gid - 0,
            extend_pam: "buytype:|tid:0",
            version: 410,
            system: "wap",
            isWeb: 1,
            distinct_id:
              "17685498279c38-070e7217d2903e-6d112d7c-1296000-1768549827abe7",
          },
        })
        .then((res) => {
          let { datas } = res;
          //获取图片信息列表
          this.imgList = datas.find((v) => v.type == 20).photos;
          //获取商品基本数据信息详情
          this.infos = datas.find((v) => v.type == 21);
          //获取优惠数据
          this.discounts = datas.find((v) => v.type == 9);
          //获取筛选数据
          if (datas.find((v) => v.type == 5)) {
            let { formats, left_text } = datas.find((v) => v.type == 5);
            let { name, option } = formats[0];
            this.format = { name, option, left_text };
          } else this.format = false;
          //获取商品描述
          let { list } = datas.find((v) => v.type == 12);
          this.describe = list;
          //获取品牌信息
          let brandhotList = datas.find(v=>v.type == 23);
          this.brandhotList = brandhotList;
        });
      //获取活动信息
      await this.$http
        .get({
          url: "/goods/detail/main.html",
          params: {
            do: "GetDynamic",
            gid: this.$route.params.gid - 0,
            extend_pam: "buytype:|tid:0",
            version: 410,
            system: "wap",
            isWeb: 1,
            distinct_id:
              "17685498279c38-070e7217d2903e-6d112d7c-1296000-1768549827abe7",
          },
        })
        .then((res) => {
          let { activity_tips, sys_time, market_price, sale_price } = res;
          if (activity_tips) {
            this.time = activity_tips.fourthDescribe.timestamp;
            this.active_tips = activity_tips;
          }
          this.market_price = market_price;
          this.sale_price = sale_price;
        });
    },
    onChange(index) {
      this.current = index;
    },
    goBack() {
      this.$router.back();
    },
    formatTime(time) {
      return time <= 9 ? "0" + time : time;
    },
    changeSpecife(index, gid) {
      this.selectedId = index;
      console.log(gid);
    },
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
  },
};
</script>
 
<style scoped lang = "stylus">
.goodsItem {
  padding-bottom: 50px;
}
/* 商品种类数量详情 */
.brandbot
    display flex
    padding 10px 25px 15px
    li
        flex 1
        text-align center
        line-height 19px
        font-size .12rem
        border-right 1px solid #e7e7e7
        &:last-child
            border-right 0
        p
            height 19px

/* 商家详情 */

.brandhotbuy {
  width: 100%;

  .brandtop {
    position relative
    display: flex;
    height: 47px;
    padding: .1rem 0.1rem 0 .1rem;

    &>img {
      height: 0.47rem;
    }

    .brandtit {
      display: flex;
      height: 0.2rem;
      font-size: 0.13rem;

      p {
        padding-left: 5px;
      }
    }
  }
}

.no-follow {
  color: #ed4044;
  border: 1px solid #ed4044;
}

.follow-btn {
  position absolute
  right 0
  top 10px
  height: 26px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 15px;
  .plus_icon,.guanzhu{
      vertical-align middle
  }
}

.price-origin {
  display: flex;
  width: 100%;
  padding: 10px 10px 0 10px;
  align-items: center;

  .pro-price {
    width: 50%;
    height: 0.32rem;
  }

  .pro-origin {
    width: 50%;
    height: 0.25rem;

    img {
      height: 25px;
      display: block;
      float: right;
    }
  }
}

.now-price, .now-yuan {
  color: #ea5858;
}

.now-price {
  font-size: 20px;
  margin-right: 10px;
}

.origin-price {
  text-decoration: line-through;
  color: #333;
}

/* 商品描述 */
.describe {
  display: flex;
  text-align: center;
  height: 0.4rem;

  li {
    display: flex;
    flex: 1;
    font-size: 0.12rem;
    color: #666;
    justify-content: center;
    text-align: center;
    line-height: 0.2rem;
    padding: 0.1rem 0;

    img {
      display: inline-block;
      height: 0.2rem;
    }
  }
}

.header {
  display: flex;
  align-items: center;
  width: 100%;
  color: #333;
  padding: 0 0.05rem;
  border-bottom: 1px solid #f3f3f3;

  a {
    display: inline-block;
    height: 0.35rem;
    width: 0.35rem;
  }

  a.back {
    background: url('https://static.epetbar.com/static_web/wap/dist/images/background/topIco.png') 0 0 no-repeat; // static.epetbar.com/static_web/wap/dist/images/background/topIco.png) 0 0 no-repeat
    background-size: 35px auto;
  }

  a.more {
    background: url('https://static.epetbar.com/static_web/wap/dist/images/background/topIco.png') 0 -70px no-repeat; // static.epetbar.com/static_web/wap/dist/images/background/topIco.png) 0 -70px no-repeat
    background-size: 35px auto;
  }

  .head-nav {
    flex: 1;
    font-size: 0.18rem;
    text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;

    span {
      margin: 0 0.05rem;
      padding-bottom: 0.11rem;
    }

    span.active {
      border-bottom: 2px solid #f03e3e;
    }
  }
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  height: 30px;
  width: 0.3rem;
  color: #fff;
  border-radius: 0.15rem;
  line-height: 0.3rem;
  text-align: center;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.2);
}

.photos {
  display: block;
  width: 100%;
}

.active-item {
  display: flex;
  width: 100%;
  height: 0.65rem;

  .price {
    font-size: 0.15rem;
    width: 65%;
    height: 0.65rem;
    padding: 0.1rem;
    background: pink;
    color: #fff;

    .active-price {
      height: 0.25rem;
      line-height: 0.25rem;

      span {
        font-size: 0.16rem;
        font-weight: bold;
      }
    }

    .sale-price {
      height: 0.2rem;
      line-height: 0.2rem;

      span {
        text-decoration: line-through;
      }
    }
  }

  .active-time {
    width: 35%;
    padding: 0.1rem;
    height: 0.65rem;
    background: skyblue;
    text-align: center;

    .brand-day {
      height: 0.19rem;
      line-height: 0.19rem;
      font-size: 0.12rem;
    }
  }
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ad7340;
}

.block {
  display: inline-block;
  margin-top: 5px;
  width: 18px;
  color: #ad7340;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  background-color: #fff;
}

/* 商品详情信息 */
.goods-info {
  padding-bottom: 0.1rem;
  font-size: 0.12rem;
  color: #333333;

  .pro_info {
    font-size: 0.13rem;
    padding: 0 10px;
  }

  .pro_desc {
    font-size: 0.12rem;
    color: #e75656;
    padding: 0 10px;
  }
}

.margin_div {
  height: 0.1rem;
  background: #f5f5f5;
}

/* 优惠折扣 */
.discounts span {
  line-height: 0.15rem;
}

.discount_l {
  display: flex;
}

.discounts .icon {
  height: 0.15rem;
  width: 0.15rem;

  img {
    display: block;
    width: 0.15rem;
  }
}

.ask-left-text {
  padding: 0 0.03rem;
}

.discount_link {
  display: flex;
  height: 0.15rem;
  justify-content: space-between;
}

.ellipsis {
  /* display: inline-block; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.arrow:after {
  width: 7px;
  height: 7px;
  top: 50%;
  right: 10px;
  margin-top: -4px;
  content: '';
  display: block;
  position: absolute;
  border-top: 2px solid #d9d9d9;
  border-right: 2px solid #d9d9d9;
  -webkit-transform: scaleY(0.9) rotateZ(45deg);
}

/* 筛选数量 */
.new_specifications .paddingtb10 {
  padding: 10px 0;
}

.new_specifications .ellipsis {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.w100 {
  width: 100%;
}

.new_specifications .bui-important {
  color: #ea5858;
}

.new_specifications .w15 {
  width: 15%;
}

.new_specifications .format-title {
  vertical-align: top;
}

.new_specifications .w85 {
  width: 85%;
}

.new_specifications .format-item {
  padding: 5px 20px;
  line-height: 1;
}

.new_specifications .selected {
  color: #fff !important;
  background-color: #f03e3e !important;
}

/* 购买数量计数器 */
.buyCount {
  display: flex;
  height: 0.52rem;
  padding: 0.1rem;
  background: #fff;

  .buyCount_text {
    width: 0.71rem;
    font-size: 0.13rem;
    line-height: 0.32rem;
  }

  .stepper {
    margin-top: 2px;

    .van-stepper__input {
      color: #f03e3e !important;
    }
  }
}

.place {
  position: relative;
  padding: 0.1rem 0 0.1rem 0.1rem;
  color: #333;
  display: flex;
  font-size: 0.13rem;
  border-bottom: 1px solid #f5f5f5;

  .button_icon {
    width: 40%;
    padding-right: 0.2rem;
  }

  .place_info {
    width: 60%;
    display: flex;

    span {
      display: block;
      height: 0.15rem;
      line-height: 0.15rem;
    }

    i {
      height: 0.15rem;
      width: 0.15rem;

      img {
        display: block;
        width: 100%;
      }
    }
  }
}
</style>